<template>
  <div class="full-width main-box p-4">
    <DateSelect ref="dateSelectRef" @search="searchInfoDate"></DateSelect>
    <div class="chart-box">
      <Card title="生产量统计" class="card-flex">
        <Bar ref="productionRef" />
      </Card>
      <Card title="出货量统计" class="card-flex">
        <Bar ref="outputRef" />
      </Card>
      <Card title="稼动率" class="card-flex">
        <Bar ref="effciencyRef" />
      </Card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import Bar from './Bar.vue';
import { ref, onMounted } from 'vue';
import DateSelect from "./DateSelect.vue";
import { getProductionData, getOutputData, getEffciencyData } from '@/api/goods/shipment'

let productionRef = ref()
let outputRef = ref()
let effciencyRef = ref()
const dateSelectRef = ref()
let searchInfo = ref();


const searchInfoDate = (params) => {
  searchInfo.value = params;
  refreshData(searchInfo);
}

onMounted(() => {
  dateSelectRef.value.search()
})
const refreshData = (searchInfo) => {
  outputRef.value.getData(getOutputData(searchInfo.value))
  productionRef.value.getData(getProductionData(searchInfo.value))
  effciencyRef.value.getData(getEffciencyData(searchInfo.value), searchInfo.value.queryType === 'day')
}

</script>
<style scoped lang="less">
.main-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;

  .chart-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;

    .ant-card {
      flex-grow: 1;
      min-height: 340px;
      overflow: hidden;

      &:not(:last-child) {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
